import React, { Component } from 'react';
import ReactDom from 'react-dom';
import {Button,Dialog,Form,Input} from 'element-react';
import IData from './personMsgData.js';

export class Email extends Component {
    constructor(props) {
        super(props);

        this.state = {
            form: {
                isValid:false,
                email: IData.email
            },
            value1:IData.email,
            dialogVisible: false,
            rules: {
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
                ]
            }
        };
    }
    onEmailChange(value) {
        this.setState({
            form: Object.assign({}, this.state.form, { email: value}),
        });
    }

    enter(event){
        event=event||window.event;
        if(event.keyCode=='13'){
            this.ho();
        }
    }
    ho() {
        this.setState({ dialogVisible: false })

        this.refs.form.validate((valid) => {
            if (valid) {
                let value1=this.state.form.email;
                this.setState({
                   value1
                })
            }
            else {
                this.setState({
                    value1:"111@163.com"
                })
            }
        });

    }

    render() {
        return (

            <div className="zy1">
                <Button type="text"className="font"  onClick={ () => this.setState({ dialogVisible: true }) }>
                    <span>{this.state.value1}</span>&nbsp;&nbsp;&nbsp;<i className="el-icon-arrow-right el-icon-edit"></i></Button>
                        <Dialog
                           title="邮箱"
                           size="middle"
                           visible={ this.state.dialogVisible }
                           onCancel={ () => this.setState({ dialogVisible: false}) }
                        >
                           <Dialog.Body>
                               <Form ref="form" model={this.state.form} rules={this.state.rules} labelWidth="100">
                                   <Form.Item prop="email" label="邮箱">
                                       <Input value={this.state.form.email} onChange={this.onEmailChange.bind(this)} onKeyDown={this.enter.bind(this)}></Input>
                                   </Form.Item>
                               </Form>
                           </Dialog.Body>
                           <Dialog.Footer className="dialog-footer">
                           <Button type="primary" onClick={this.ho.bind(this)}>保存</Button>
                           </Dialog.Footer>
                        </Dialog>
            </div>
        )
    }

}